

<template>
  <div class="app">
    <el-table :data="List">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{row}">
          <el-button type="primary" link @click="deit(row)">编辑</el-button>
          <el-button type="danger" link @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗
    <el-dialog v-model="dialogVisible" title="编辑" width="400px">
    <el-form label-width="50px" :model="data">
      <el-form-item label="姓名">
        <el-input v-model="data.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input v-model="data.place" placeholder="请输入籍贯" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add">确认</el-button>
      </span>
    </template>
  </el-dialog> -->
  </div>
  <!-- //* 弹窗 -->
  <Edit ref="fm" />
</template>

<script setup>
import axios from 'axios'
import Edit from './components/Edit.vue'
import { onMounted, provide, ref, watch } from 'vue'
const List = ref([])
const data = ref({ id:null, name:'', place:'' })
let dialogVisible = ref(false)
const qwer = ref({})
const fm = ref(null)


   // TODO: 列表渲染
 const delList = onMounted(async()=>{
   const {data} = await axios.get('/list')
   List.value = data
})
    // TODO: 删除功能
  const del= async(id)=>{
    await axios.delete(`/del/${id}`)
    delList() //* 重新渲染列表
  }
  
    // TODO: 编辑功能
const deit = (row)=>{
  fm.value.validata() // 打开弹窗
  //* 编辑回显数据
   data.value = row

   //! 不拆分写法
  // dialogVisible.value = true  // 打开弹窗
  // 数据 赋值 回显
  // data.value.id = id
  // data.value.name = name
  // data.value.place = place
}
//* 监听到最新的数据并传出去
watch(data,(newVal)=>{
  console.log(newVal);
  qwer.value = newVal
},{deep:true})
provide('data',qwer)

//* 方法传给 子组件

// //*确认
// const add = ()=>{
//   const id = data.value.id
//   axios.patch(`/edit/${id}`, {
//   name: data.value.name,
//   place: data.value.place,
// })
//   delList()  //* 重新渲染列表
// dialogVisible.value = false  // 关闭弹窗
// }
</script>

<style scoped>
.app {
  width: 980px;
  margin: 100px auto 0;
}
/* .el-input {
  width: 290px;
} */
</style>
